<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>地址智能识别</title>
    <link rel="icon" type="image/x-icon" href="img/smart.png" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/pcasCode.js"></script>
    <script src="js/zipCode.js"></script>
    <script src="js/address_parse.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <script src="js/axios.js"></script>

    <style>
      #value .key {
        color: #ff5722;
        display: inline-block;
        width: 111px;
        text-align: right;
      }

      #value .value {
        color: #366500;
        padding-left: 10px;
      }

      li {
        padding: 5px;
      }

      li:hover {
        cursor: pointer;
        background: #8bc34aa1;
        padding: 5px;
      }
    </style>
  </head>

  <body>
    <div class="page-header">
      <h1>
        地址智能识别
        <small>支持省市区街道/姓名/电话/邮编/身份证号码(字母大写)</small>
        <a
          class="github-button"
          href="https://github.com/wzc570738205/smartParsePro"
          data-size="large"
          data-show-count="true"
          aria-label="Star wzc570738205/smartParsePro on GitHub"
          >Star</a
        >
      </h1>
    </div>

    <div class="alert alert-danger" role="alert">地址、姓名、电话、邮编、身份证号码（字母大写）用空格或者特殊字符分开!!（支持以下数据格式</div>
    <div>
      特殊字符<code>~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“’。，、？-</code>
    </div>
    <br />
    <ol>
      <li>广东省珠海市香洲区盘山路28号幸福茶庄,陈景勇，13593464918</li>
      <li>马云，陕西省西安市雁塔区丈八沟街道高新四路高新大都荟 13593464918</li>
      <li>陕西省西安市雁塔区丈八沟街道高新四路高新大都荟710061 刘国良 13593464918 211381198512096810</li>
      <li>西安市雁塔区丈八沟街道高新四路高新大都荟710061 刘国良 13593464918 211381198512096810</li>
      <li>雁塔区丈八沟街道高新四路高新大都荟710061 刘国良 13593464918 211381198512096810</li>
      <li>北京市朝阳区姚家园3楼 13593464918 马云</li>
      <li>河北省石家庄市新华区中华北大街68号鹿城商务中心6号楼1413室 150-3569-6956 马云</li>
      <li>疆维吾尔自治区乌鲁木齐市沙依巴克区西虹东路463号 400-1808855 小红</li>
      <li>新疆阿克苏温宿县博孜墩柯尔克孜族乡吾斯塘博村一组306号 800-8585222 马云</li>
    </ol>

    <textarea
      class="form-control"
      onchange="getAddress()"
      cols="50"
      rows="5"
      id="textarea"
      placeholder="请粘贴你的地址或者点击上述地址进行识别"
    ></textarea>
    <h4>省市区街道四级联动</h4>
    <form class="form-inline">
      <div class="form-group">
        <label for="exampleInputName2">省/直辖市</label>
        <select class="form-control" id="province">
          <option>请选择</option>
        </select>
      </div>
      <div class="form-group">
        <label for="exampleInputEmail2">市</label>
        <select class="form-control" id="city">
          <option>请选择</option>
        </select>
      </div>
      <div class="form-group">
        <label for="exampleInputEmail2">区/县</label>
        <select class="form-control" id="county">
          <option>请选择</option>
        </select>
      </div>
      <div class="form-group">
        <label for="exampleInputEmail2">镇/乡/街道</label>
        <select class="form-control" id="street">
          <option>请选择</option>
        </select>
      </div>
    </form>
    <div id="response"></div>
    <div id="value"></div>
  </body>
</html>
<script>
  $('li').on('click',function(e){
    $("#textarea").val( $(this).html().trim()) 
    getAddress()
  })
  function getAddress() {
    let parse_list = smart($("#textarea").val());
    let html = "";
    for (let key in parse_list) {
      if (parse_list[key]) {
        html +=
          `<p><span class="key">` +
          key +
          `</span>:<span class="value">` +
          parse_list[key] +
          `</span></p>`;
      }
    }
    $("#value").html(html);

    axios({
      method: "post",
      url: "https://wangzc.wang/smAddress",
      data: {
        address: $("#textarea").val(),
      },
    }).then(function (res) {
     $('#response').html(`<span style="color:green">接口调用状态码：200；当前调用次数：`+res.data.requestNumber+`</span>`)
    }).catch(function(err){
     $('#response').html(`<span style="color:red">接口调用状态码：500</span>`)
    });

    $("#province").val(parse_list.provinceCode);
    $("#city").val(parse_list.cityCode);
    $("#county").val(parse_list.countyCode);
    $("#street").val(parse_list.streetCode);

    getCity($("#province").val(), parse_list);
    getCounty($("#city").val(), parse_list);
    getStreet($("#county").val(), parse_list);
  }
  addressList = pcassCode;
  addressList.forEach((item) => {
    formatAddresList(item, 1, "");
  });
  let province = "";
  addressList.forEach((res) => {
    province += ` <option value='` + res.code + `'>` + res.name + `</option>`;
  });
  $("#province").html(province);
  getCity($("#province").val());
  getCounty($("#city").val());
  getStreet($("#county").val());

  $("#province").change((res) => {
    let provinceCode = $("#province").val();
    getCity(provinceCode);
    getCounty($("#city").val());
    getStreet($("#county").val());
  });

  $("#city").change((res) => {
    let cityCode = $("#city").val();
    getCounty(cityCode);
    getStreet($("#county").val());
  });

  $("#county").change((res) => {
    let countyCode = $("#county").val();
    getStreet(countyCode);
  });

  function getCity(provinceCode, parse_list) {
    let cityList = [];
    let city = "";
    addressList.forEach((res) => {
      if (res.code == provinceCode) {
        cityList = res.children;
        return;
      }
    });
    cityList.forEach((res) => {
      city += ` <option value='` + res.code + `'>` + res.name + `</option>`;
    });
    $("#city").html(city);
    if (parse_list) {
      $("#city").val(parse_list.cityCode);
    }
  }

  function getCounty(cityCode, parse_list) {
    let countyList = [];
    let county = "";
    addressList.forEach((el) => {
      el.children.forEach((res) => {
        if (res.code == cityCode) {
          countyList = res.children;
          return;
        }
      });
    });

    countyList.forEach((res) => {
      county += ` <option value='` + res.code + `'>` + res.name + `</option>`;
    });
    $("#county").html(county);
    if (parse_list) {
      $("#county").val(parse_list.countyCode);
    }
  }

  function getStreet(countyCode, parse_list) {
    let streetList = [];
    let street = "";
    addressList.forEach((el) => {
      el.children.forEach((element) => {
        element.children.forEach((res) => {
          if (res.code == countyCode) {
            streetList = res.children;
            return;
          }
        });
      });
    });
    streetList.forEach((res) => {
      street += ` <option value='` + res.code + `'>` + res.name + `</option>`;
    });
    $("#street").html(street);
    if (parse_list) {
      $("#street").val(parse_list.streetCode);
    }
  }


</script>

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119026906-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-119026906-1');
</script>
